<template>
	<view class="order-detail-page">
		<view class="top">
			<image class="bg" src="/static/bg.jpg"></image>
			<u-navbar :border-bottom="false" :is-fixed="false" title="拼团" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
			<view class="left-bar">10人团</view>
			<view class="right-bar">
				<text>拼团规则</text>
				<text class="question">?</text>
			</view>
			<view class="top-title one-line">苹果13pro超值拼团</view>
			<view class="tips-line">
				<view class="tips">10人团中1</view>
				<view class="share">
					<image :src="imagesUrl.share"></image>
				</view>
			</view>
		</view>
		
		<view class="main-content">
			<view class="goods-content">
				<view class="goods">
					<image></image>
					<view class="detail">
						<view class="title two-line">苹果13PRO超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全</view>
						<view class="price">
							<view class="new">￥6599.00</view>
							<view class="old">￥7599.00 </view>
						</view>
					</view>
				</view>
				<view class="btn" v-if="false">立即参与拼团</view>
				<view class="btn finished-btn" @click="toPage('/pages/order/pay')">已成团</view>
				<view class="users">
					<view class="title">9人参与了拼团</view>
					<view class="imgs-box">
						<view class="img">
							<image></image>
						</view>
						<view class="img">
							<image></image>
						</view>
						<view class="img active-img">
							<text>拼中</text>
							<image></image>
						</view>
						<view class="img">
							<image></image>
						</view>
						<view class="img">
							<image></image>
						</view>
						
						<view class="img" style="margin: 0"></view>
						<view class="img" style="margin: 0"></view>
						<view class="img" style="margin: 0"></view>
						<view class="img" style="margin: 0"></view>
						
					</view>
				</view>
			</view>
			<view class="rules">
				<view class="title">10人团中1拼团规则</view>
				<view class="details">10人参与拼团则成团，成团后系统自动抽取1名参与拼团用户为拼中用户，拼中用户可得到该商品和对应积分，剩下9名未拼中的用户则获取商品金额的1%做为未拼中补偿，同时退还拼团本金。</view>
			</view>
			
			<view class="goods-detail-title">
				<image :src="imagesUrl.line2"></image>
				<text>商品详情</text>
				<image :src="imagesUrl.line1"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	export default {
		data () {
			return {
				imagesUrl: imagesUrl.order
			}
		},
		methods:{
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.order-detail-page {
		background: #EB342C;
		padding-bottom: 40rpx;
		.top {
			width: 100%;
			height: 417rpx;
			position: relative;
			.bg {
				width: 100%;
				height: 417rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			.left-bar {
				position: absolute;
				left: 0;
				top: 169rpx;
				width: 176rpx;
				height: 55rpx;
				line-height: 55rpx;
				text-align: center;
				background: #FDD2A5;
				border-radius: 0 28rpx 28rpx 0;
				font-size: 34rpx;
				color: #F03234;
				font-weight: bold;
			}
			.right-bar {
				position: absolute;
				top: 174rpx;
				right: 23rpx;
				width: 153rpx;
				text-align: center;
				background: #C73E3D;
				border-radius: 19rpx;
				font-size: 24rpx;
				color: #F9CDCB;
				padding-bottom: 8rpx;
				text {
					display: inline-block;
					vertical-align: middle;
				}
				.question {
					margin-left: 5rpx;
					width: 25rpx;
					height: 25rpx;
					line-height: 25rpx;
					border-radius: 50%;
					background: #fff;
					color: #C73E3D;
					font-size: 20rpx;
				}
			}
			.top-title {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				text-align: center;
				position: absolute;
				left: 0;
				top: 256rpx;
				color: #FFF5C7;
				font-size: 38rpx;
				font-weight: bold;
			}
			.tips-line {
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 25rpx;
				left: 0;
				.tips, .share {
					display: inline-block;
					vertical-align: top;
					color: #fff;
					background: #D40E25;
				}
				.tips {
					padding: 10rpx 30rpx;
					border-radius: 28rpx;
					font-size: 30rpx;
					// font-weight: bold;
				}
				.share {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-left: 20rpx;
					position: relative;
					image {
						width: 28rpx;
						height: 34rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	
		.main-content {
			width: 100%;
			padding: 0 25rpx;
			
			.goods-content {
				width: 100%;
				border-radius: 10rpx;
				background: #fff;
				padding: 40rpx 25rpx;
				box-sizing: border-box;
				.goods {
					display: flex;
					image {
						width: 210rpx;
						height: 160rpx;
						margin-right: 25rpx;
					}
					.detail {
						flex: 1;
						.title {
							width: 100%;
							color: #333;
							font-size: 30rpx;
							margin-bottom: 38rpx;
						}
						.price {
							display: flex;
							.new {
								font-size: 34rpx;
								font-weight: bold;
								color: #FD8201;
								font-family: SimHei;
								margin-right: 20rpx;
							}
							.old {
								color: #ccc;
								font-size: 30rpx;
								text-decoration:line-through;
							}
						}
					}
				}
				.btn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: #EB342C;
					color: #fff;
					font-size: 34rpx;
					margin: 40rpx 0;
					border-radius: 10rpx;
					&.finished-btn {
						background: #FDD2A5;
						color: #000;
					}
				}
				
				.users {
					width: 100%;
					padding: 40rpx 0;
					box-sizing: border-box;
					border-radius: 10rpx;
					background: #FFF5F4;
					.title {
						text-align: center;
						color: #D73228;
						font-size: 35rpx;
					}
					.imgs-box {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						padding-right: 23rpx;
						.img {
							width: 95rpx;
							margin-top: 40rpx;
							margin-left: 23rpx;
							position: relative;
							&.active-img {
								image {
									border: 2px solid #D73228;
								}
								text {
									position: absolute;
									top: -13rpx;
									right: -43rpx;
									z-index: 10;
									width: 80rpx;
									height: 40rpx;
									line-height: 40rpx;
									text-align: center;
									color: #FDD2A5;
									font-size: 24rpx;
									background: #EB342C;
									border-radius: 20rpx 20rpx 20rpx 0;
								}
							}
							image {
								width: 95rpx;
								height: 95rpx;
								border-radius: 50%;
							}
						}
					}
				}
			}
			.rules {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				padding: 40rpx 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				.title {
					text-align: center;
					font-size: 35rpx;
					margin-bottom: 40rpx;
					color: #EB342C;
				}
				.details {
					font-size: 28rpx;
					color: #999;
					line-height: 48rpx;
				}
			}
			
			.goods-detail-title {
				text-align: center;
				margin: 60rpx 0 40rpx;
				image, text {
					display: inline-block;
					vertical-align: middle;
				}
				image {
					width: 132rpx;
					height: 4rpx;
				}
				text {
					margin: 0 30rpx;
					color: #FDD2A5;
					font-size: 35rpx;
				}
			}
			
		}
	}
</style>
